<template>
  <div class="top-bar">
    <p class="top-bar-box" @touchstart.stop.prevent="back"><slot name="left"><img src="./../../../static/img/back.png" alt=""></slot></p>
    <p class="title"><slot name="title" ></slot></p>
    <p class="top-bar-box">
      <slot name="right"><img src="./../../../static/img/title_message.png" alt=""/><div class="new-message">{{newMsg}}</div></slot>
    </p>
  </div>
</template>

<script>
    export default {
      name: "top-bar",
      props: {
        newMsg: {
          type: Number,
          default: 2
        }
      },
      data () {
        return {
        }
      },
      methods: {
        back () {
          this.$router.go(-1)
        }
      }
    }
</script>

<style scoped lang="scss">
  @import "../../common/sass/mixin";

  .top-bar{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 90px;/*rem*/
    padding: 20px 36px;/*rem*/
    @include headerBc;
    /*border-bottom: 1px solid #cccccc;*/
    .top-bar-box{
      width: 200px;
      text-align: left;
      position: relative;
      color: #ffffff;
      @include font-dpr(24px);
      &:last-child{
        text-align: right;
      }
      img{
        height: 40px;/*rem*/
        width: 40px;/*rem*/
      }
      .new-message {
        position: absolute;
        right: -10px;
        top: -8px;
        padding: 5px 6px;
        @include font-dpr(12px);
        line-height: 15px;
        text-align: center;
        background-color: #ff6c72;
        border-radius: 50%
      }
    }
    .title{
      @include font-dpr(28px);
      color: #fff;
      flex: 1;
      text-align: center;
    }
  }
</style>
